<template>
    <!-- 非独立模块的头部导航组件 /:title 匹配规则-->
    <!-- 这个符合多个页面都有的组件，可以使用嵌套路由 -->
    <!-- 这里想法为router-view中嵌套另一个路由，利用exact选择加载了不同页面，受了react影响，这是不对的，行不通，需要写children -->
    <div id="content">
        <div class="nav_warp">
            <div class="section_nav">
                <div class="item">
                    <router-link to="/video">视频</router-link>
                </div>
                <div class="item">
                    <router-link to="/event">时事</router-link>
                </div>
                <div class="item">
                    <router-link to="/finance">财经</router-link>
                </div>
                <div class="item">
                    <router-link to="/section/pic">图片</router-link>
                </div>
                <div class="item">
                    <router-link to="/thought">思想</router-link>
                </div>
                <div class="item">
                    <router-link to="/section/mycountry">国家</router-link>
                </div>
                <div class="item">
                    <router-link to="/life">生活</router-link>
                </div>
                <div class="item">
                    <router-link to="/section/ask">问吧</router-link>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<style lang="less">
@rem: 72rem;
.nav_warp {
  width: 720 / @rem;
  height: 80 / @rem;
  overflow: scroll;
  > .section_nav {
    background-color: #eeeef3;
    height: 80 / @rem;
    padding: 25 / @rem 0;
    width: 1100 / @rem;
    > .item {
      text-align: center;
      float: left;
      width: 96 / @rem;
      border-right: 1px solid #c3c3c3;
      line-height: 30 / @rem;
      font-size: 18em;
      > .router-link-active {
        color: #00a5eb;
      }
      &:last-child {
        border-right: none;
      }
    }
  }
}
</style>

